html - CSS Drop Down Menu -> Cross Browser -

-

can of wonderful developers link or provide me link menu cross browser having issues mine , loading within firefox fine in chrome.

my div stays in correct position menu drops down below div.

my html dynamically generated , current structure is:

<nav id="mainmenu">          <ul>      <li class="first">          <a href="#">single item</a>      </li>  </ul>  <ul>      <li class="">          <a href="#">drop down menu</a>          <ul>              <li class="first">                  <a href="#">item 1</a>              </li>              <li class="last">                  <a href="#">item 2</a>              </li>          </ul>      </li>  </ul>

my current css is:

    #mainmenu{      height:50px;      margin:0 auto 15px auto;      background-color:#6a6a6a;      -moz-border-radius:3px;      -webkit-border-radius:3px;      min-width: 800px;  }   #mainmenu ul{      display:inline;      -webkit-border-bottom-right-radius:2px;      -webkit-border-bottom-left-radius:2px;      -moz-border-radius-bottomright:2px;      -moz-border-radius-bottomleft:2px;  }   #mainmenu ul li{      margin-left:0px;      width:120px;      height:56px;      float: left;      list-style: none;      position:relative;  }    #mainmenu li {      float:left;      display:block;      text-decoration:none;      width:120px;      height:35px;      font-size:13px;      line-height:45px;      text-align:center;      color:#fff;      text-transform:uppercase;      padding-top:-4px;      margin:0px;  }   #mainmenu li a:hover, #mainmenu li a:active{      text-decoration:none;      background-color:#7a7a7a;      color:#fff;      width:120px;      height:50px;     -webkit-border-top-left-radius:2px;      -webkit-border-bottom-left-radius:2px;      -moz-border-radius-topleft:2px;      -moz-border-radius-topleft:2px;  }   #mainmenu .signup   {      float: right;  }   #mainmenu .signup a{      background-color:#69c21c;      height:50px;        -webkit-border-top-right-radius:2px;      -webkit-border-bottom-right-radius:2px;      -moz-border-radius-topright:2px;      -moz-border-radius-bottomright:2px;  }   #mainmenu li .signup a:hover{      background-color:#00afd8;  }   /*mainmenu sub menu */   #mainmenu ul li ul{       display: none;      background-color:#7a7a7a;       }   #mainmenu ul li:hover ul{      text-transform:none;      display:block;      position:absolute;      width:80px;      top:50px;       }   #mainmenu ul li:hover ul a{      float:left;      margin:0 0 0 -35px;      line-height:35px;      width:150px;      height:35px;      border:none;      font-size:12px;      text-align:left;      text-transform:none;  }   #mainmenu  ul li ul li a:hover{          width:115px;      height:30px;      font-weight:bold;      margin-left:-35px;      line-height:35px;  }

update:

i have fixed li positional issue adding clear:both , float left, having issues trying dropdown li's height , width of li's:

#mainmenu{     clear:both;     float:left;     margin:0 auto 15px auto;     padding:0;     z-index:1000;     position:relative;     height:50px;     background-color:#6a6a6a;     -moz-border-radius:3px;     -webkit-border-radius:3px;     min-width: 800px;  }   #mainmenu ul{      display:inline;      -webkit-border-bottom-right-radius:2px;      -webkit-border-bottom-left-radius:2px;      -moz-border-radius-bottomright:2px;      -moz-border-radius-bottomleft:2px;  }   #mainmenu ul li{      margin-left:0px;      width:120px;      height:56px;      float: left;      list-style: none;      position:relative;  }    #mainmenu li {      float:left;      display:block;      text-decoration:none;      width:120px;      height:35px;      font-size:13px;      line-height:45px;      text-align:center;      color:#fff;      text-transform:uppercase;      padding-top:-4px;      margin:0px;  }   #mainmenu li a:hover, #mainmenu li a:active{      text-decoration:none;      background-color:#7a7a7a;      color:#fff;      width:120px;      height:50px;     -webkit-border-top-left-radius:2px;      -webkit-border-bottom-left-radius:2px;      -moz-border-radius-topleft:2px;      -moz-border-radius-topleft:2px;  }   #mainmenu .signup   {     display:block;     float:right;  }   #mainmenu .signup a{      background-color:#69c21c;      height:50px;        -webkit-border-top-right-radius:2px;      -webkit-border-bottom-right-radius:2px;      -moz-border-radius-topright:2px;      -moz-border-radius-bottomright:2px;  }   #mainmenu li .signup a:hover{      background-color:#00afd8;  }   /*mainmenu sub menu */   #mainmenu ul ul{     display:none; /* sub menus hiden default */     position:absolute;     top:2em;     left:0;     right:auto; /*resets right:50% on parent ul */     width:10em; /* width of drop-down menus */     background-color:#7a7a7a;       }   #mainmenu ul ul li{     left:auto;     margin:0;     clear:left;     width:50%; }   #mainmenu ul ul li a,  #mainmenu ul li.active li a,  #mainmenu ul li:hover ul li a,  #mainmenu ul li.hover ul li { /* line required ie 6 , below */    font-weight:normal; /* resets bold set top level menu items */    line-height:1.4em; /* overwrite line-height value top menu */ }      #mainmenu ul li:hover ul{      text-transform:none;      display:block;      position:absolute;      width:155px;      top:50px;  }   #mainmenu ul li:hover ul a{      float:left;      margin:0 0 0 -35px;      line-height:35px;      width:150px;      height:35px;      border:none;      font-size:12px;      text-align:left;      text-transform:none; }   #mainmenu  ul li ul li a:hover{          width:170px;      height:30px;      font-weight:bold;      margin-left:-35px;      line-height:35px;  }

very menu http://matthewjamestaylor.com/blog/centered-dropdown-menus

quite minimal amount of code styling easy strip down , modify yourself


Comments

Post a Comment

Popular posts from this blog

linux - Using a Cron Job to check if my mod_wsgi / apache server is running and restart -

-
my group , running server based upon django , uses mod_wsgi run apache server. not working on project after over, attempting set cronjob similar functionality check if apache server has shut down(system restart or power failure), , if has, restart server me. i've found documentation on how check if apache server down , restart server if is, our server uses https , our start command pretty verbose. can use functionality provided in these examples: https://askubuntu.com/questions/277389/cron-job-to-restart-apache https://www.digitalocean.com/community/tutorials/how-to-use-a-simple-bash-script-to-restart-server-programs or need more complicated process make happen? the command use start server is python manage.py runmodwsgi --host 0.0.0.0 --port 8001 --https-port 8000 --ssl-certificate (certificate location) --server-name (domain name) i'm pretty new linux , using both mod-wsgi apache appreciated. you better off using --setup-only option mod_wsgi-expres...
Read more

actionscript 3 - TweenLite does not work with object -

-
i got following problem: i have object called tempscore game. this object blitted canvas renderer via copypixels method. object not display object. it's score-object (self made). score-object extends object called basicblitarrayobject. basicblitarrayobject extends eventdispatcher (therefore no display object). i tried apply several different tweenlite-plugins tempscore-object (i.e. transformaroundcenter, colormatrixfilter, etc.). nothing happens. absolutely nothing. sometimes error messages (when plugin requires display object , object not display object). far good. according greensock (maker of tweenlite) engine can tween numeric property of object. when plugin transformaroundcenter requires display object tweening have modify plugin working non-display object (tempscore). can't because it's way hard me. my game rests upon code: http://www.8bitrocket.com/book/ch11_blastermines.zip try apply tweenlite object called tempmine inside game class blastermines. ...
Read more

jQuery Ajax Render Fragments OR Whole Page -

-
i'm in throes of building application wraps mess of legacy code. page working on, need substitute fragment divs constructed on back-end -- or else need replace entire page altogether. idea there dynamically controlled flow needs satisfied before can forward legacy product. substituting fragments works fine, seen in below my_body_content swap. trouble comes when i'm trying render not fragment, whole page, in "body" swap. @ point page goes blank. i want similar errors returned server. want nice rest 404 error messages displayed on screen, legacy-product 404s show in legacy-product 404 page. yes, requirements project weird. that's not problem can fix. here's jquery invocation, names changed protect guilty: $.ajax({ url: "places/things", type: "post", data: json.stringify(somebadassobject), datatype: "text", accepts: "text/html", contenttype: "application/json; charset=...
Read more