CSS下拉菜单 - >交叉浏览器 [英] CSS Drop Down Menu -> Cross Browser
本文介绍了CSS下拉菜单 - >交叉浏览器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
任何一个美妙的开发人员链接或提供一个链接到一个菜单是跨浏览器我有我的问题，并在Firefox中加载它，但在chrome中很好。
Can any of you wonderful developers link or provide me with a link to a menu that is cross browser I am having issues with mine and its loading within firefox but is fine in chrome.
我的div保持在正确的位置，但菜单本身下降到div下面。
My div stays in the correct position but the menu itself drops down below the div.
我的HTML是动态生成的，当前的结构是： p>
My HTML is dynamically generated and the 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>
是：
#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 a {
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;
}
更新：
我已经修正了我的位置问题，通过添加clear：both和float left，现在我有问题，试图让我的下拉列表是li的高度和宽度：
I have fixed my li positional issue by adding clear:both and float left, Now I am having issues trying to get my dropdown li's to be the height and width of the 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 a {
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 are hiden by default */
position:absolute;
top:2em;
left:0;
right:auto; /*resets the right:50% on the parent ul */
width:10em; /* width of the 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 a { /* This line is required for IE 6 and below */
font-weight:normal; /* resets the bold set for the top level menu items */
line-height:1.4em; /* overwrite line-height value from 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;
}
推荐答案
=http://matthewjamestaylor.com/blog/centered-dropdown-menus =nofollow> http://matthewjamestaylor.com/blog/centered-dropdown-menus
Very good menu http://matthewjamestaylor.com/blog/centered-dropdown-menus
相当少量的代码样式，以便轻松地修改和修改自己
Quite minimal amount of code styling so its easy to strip down and modify yourself
这篇关于CSS下拉菜单 - >交叉浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
