0

我在使用浮动在另一个导航 div 中的 CSS 下拉菜单时遇到了一些问题。它在除 IE 之外的所有浏览器中都可以正常工作。
这是位于页面上的脚本（是的，它是正确的 Doctype）。

<div id="topbar">
<h2 style="color: #2d2d2d; padding: 20px;">
 <a class="topbar" href="/index.php">Site Title</a><span style="float:right; clear:right; 
margin-top: -32px; ">
<div id='cssmenu'>
<ul>
<li class='active has-sub'><a href='/profile.php'><span>
  Profile Name        </span></a>
  <ul>
    <li><a href="/profile.php">Profile</a></li>
    <li><a href="/editaccount.php">Account</a></li>
    <li><a href="logout.php">Logout</a></li>
  </ul>
  </li>
 </ul>
</div>
     </span> </div>



> #cssmenu{    height:37px;    display:block;    padding:0;    margin:20px auto;     border:1px solid;    border-radius:5px;    }
> 
>    #cssmenu > ul {list-style:inside none; padding:0; margin:0;}   
> #cssmenu > ul > li {list-style:inside none; padding:0; margin:0; float:left;    display:block; position:relative;}
> 
>    /* Styling navigation links */    #cssmenu > ul > li > a{   
> outline:none;    display:block;    position:relative;    padding:12px
> 20px;    font:bold 13px/100% Arial, Helvetica, sans-serif;   
> text-align:center;    text-decoration:none;    text-shadow:1px 1px 0
> rgba(0,0,0, 0.4);    }
> 
>    #cssmenu > ul > li:first-child > a{border-radius:5px 0 0 5px;}
> 
> 
>    /* Extra border for navigation links */    #cssmenu > ul > li >
> a:after{    content:'';    position:absolute;    border-right:1px
> solid;    top:-1px; bottom:-1px; right:-2px;    z-index:99;    }   
> #cssmenu ul li.has-sub:hover > a:after{top:0; bottom:0;}
> 
>    /* Bullet for dropdowns */    #cssmenu > ul > li.has-sub >
> a:before{    content:'';    position:absolute; top:18px; right:6px;   
> border:5px solid transparent;    border-top:5px solid #fff;    }   
> #cssmenu > ul > li.has-sub:hover > a:before{top:19px;}
> 
>    /* Hover state styles for drop menu link */    #cssmenu ul
> li.has-sub:hover > a{    background:#3f3f3f;    border-color:#ccc;   
> padding-bottom:13px; padding-top:13px;    top:-1px;    z-index:999;   
> }
> 
>    /* Show dropdown when hover */    #cssmenu ul li.has-sub:hover >
> ul, #cssmenu ul li.has-sub:hover > div{display:block;}    #cssmenu ul
> li.has-sub > a:hover{background:#3f3f3f; border-color:#ccc;}
> 
>    /* Dropdown styles */    #cssmenu ul li > ul, #cssmenu ul li > div{
> display:none; width:auto;    position:absolute; top:38px;   
> padding:10px 0;    background:#3f3f3f;    border-radius:0 0 5px 5px;  
> z-index:999;    }
> 
>    /* Dropdown list style */    #cssmenu ul li > ul{width:200px;}   
> #cssmenu ul li > ul li{display:block; list-style:inside none; padding:0; margin:0;    position:relative;}    #cssmenu ul li > ul li
> a{    outline:none; display:block;    position:relative;    margin:0;
> padding:8px 20px;    color:#fff;    text-decoration:none;   
> text-shadow:1px 1px 0 rgba(0,0,0, 0.5);    }
> 
>    /* Dropdown box styles */    #cssmenu ul li > div{width:auto;
> padding:20px;}    #cssmenu ul li > div p{    font:9pt/150%;
> color:#fff;    text-align:justify;    text-shadow:1px 1px 0
> rgba(0,0,0,0.5);    margin:0;    }
> 
>    #cssmenu ul li > div h1{    position:relative;    margin:0 0 12px
> 0;    padding-bottom:10px;    border-bottom:1px solid #222;   
> font:bold 13pt; color:#bbb;    text-shadow:1px 1px 0 rgba(0,0,0,0.5); 
> }    #cssmenu ul li > div h1:after{    content:'';    height:0;
> padding:0;    position:absolute; bottom:-2px; left:0; right:0;   
> border-bottom:1px solid #555;    }
4

1 回答 1

0

在此处检查此小提琴链接

*{
    padding:0;
    margin:0;
    }
body {
    font:normal 12px/18px Arial, Helvetica, sans-serif;
    color:#000;
    padding:20px;
    background-color:#F2F2F2;
    }
ul, li, ol {
    list-style-type:none;
    }

.wrapper {
    width:95%;
    padding:10px;
    margin:0 auto;
    border:1px  solid green;
}
.spacer {
    clear:both;
    font-size:0;
    line-height:0;
    height:0;
    }

h2 {
    float:left;
    color:#2d2d2d;
    padding:20px;
    }
#cssmenu{
    height:37px;
    display:block;
    padding:0;
    border:1px solid;
    border-radius:5px;
}
#cssmenu > ul {
    list-style:inside none; 
    padding:0; 
    margin:0;
    }   
#cssmenu > ul > li {
    list-style:inside none; 
    padding:0; 
    margin:0; 
    float:left;    
    display:block; 
    position:relative;
    }

/* Styling navigation links */    
#cssmenu > ul > li > a{   
    outline:none;
    display:block;
    position:relative;
    padding:12px 20px;
    font:bold 13px/100% Arial, Helvetica, sans-serif;   
    text-align:center;
    text-decoration:none;
    text-shadow:1px 1px 0 rgba(0,0,0, 0.4);    
    }
   #cssmenu > ul > li:first-child > a{border-radius:5px 0 0 5px;}


/* Extra border for navigation links */    
#cssmenu > ul > li > a:after{
    content:''; 
    position:absolute;    
    border-right:1px solid;    
    top:-1px; bottom:-1px; right:-2px;   
    z-index:99;    
     }   
#cssmenu ul li.has-sub:hover > a:after{
    top:0;
    bottom:0;
    }

/* Bullet for dropdowns */    
#cssmenu > ul > li.has-sub > a:before{    
    content:'';    
    position:absolute; 
    top:18px; 
    right:6px;   
    border:5px solid transparent;    
    border-top:5px solid #fff;    
    }   
#cssmenu > ul > li.has-sub:hover > a:before{
    top:19px;
    }

/* Hover state styles for drop menu link */   
#cssmenu ul li.has-sub:hover > a{    
    background:#3f3f3f;   
    border-color:#ccc;   
    padding-bottom:13px; 
    padding-top:13px;    
    top:-1px;   
    z-index:999;   
    }

/* Show dropdown when hover */    
#cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div{
    display:block;
    }    
#cssmenu ul li.has-sub > a:hover{
    background:#3f3f3f; 
    border-color:#ccc;
    }

/* Dropdown styles */   
#cssmenu ul li > ul, #cssmenu ul li > div{
    display:none; 
    width:auto;   
    position:absolute; 
    top:38px;  
    right: -2px;
    text-align: right; 
    padding:10px 0;    
    background:#3f3f3f;    
    border-radius:0 0 5px 5px;  
    z-index:999;   
     }

/* Dropdown list style */   
#cssmenu ul li > ul{width:200px;}   
#cssmenu ul li > ul li{
    display:block; 
    list-style:inside none; 
    padding:0; 
    margin:0;    
    position:relative;
    }    
#cssmenu ul li > ul li a{    
    outline:none; 
    display:block;    
    position:relative;   
    margin:0;
    padding:8px 20px;    
    color:#fff;   
    text-decoration:none;   
    text-shadow:1px 1px 0 rgba(0,0,0, 0.5);   
    }

/* Dropdown box styles */    
#cssmenu ul li > div{
width:auto;
padding:20px;
}    
#cssmenu ul li > div p{    
    font:9pt/150%;
    color:#fff;    
    text-align:justify;    
    text-shadow:1px 1px 0
    rgba(0,0,0,0.5);    
    margin:0;    
    }
#cssmenu ul li > div h1{    
    position:relative;    
    margin:0 0 12px 0;    
    padding-bottom:10px;    
    border-bottom:1px solid #222;   
    font:bold 13pt; color:#bbb;    
    text-shadow:1px 1px 0 rgba(0,0,0,0.5); 
    }   
#cssmenu ul li > div h1:after{   
    content:'';   
    height:0;
    padding:0;   
    position:absolute;
    bottom:-2px; 
    left:0; 
    right:0;   
    border-bottom:1px solid #555;  
    }
于 2013-07-08T11:01:28.143 回答