0

このメニューの外観を模倣しようとしていますが、エラーを修正しています.: http://349ghgg83g.weebly.com/

「ホーム」にカーソルを合わせてから「ポートフォリオ」に移動すると、「ポートフォリオ」の下に下線が表示されます。しかし、「連絡先」から「ポートフォリオ」に移動すると、下線が表示されません。また、私のバージョンでは、サブアイテムが消えるため、「ポートフォリオ」からサブアイテムにうまく移動できません。Weebly であるため、ページのコードはありませんが、ここで再現しようとしました: http://jsfiddle.net/247t1aW3b/DnRfR/

<!DOCTYPE html>
<html lang="en-US">
<head>
     <link rel="stylesheet" href="home.css" type="text/css"/>
</head>

<body id="body1">  
<div id="nav-wrap">
    <ul id="nav">   
            <li><a href="/">Home</a></li>
            <li>
                <a href="#">Portfolio</a>
                <ul>
                    <li><a href="#">Item 1</a></li>
                    <li><a href="#">Item 2</a></li>
                </ul>
            </li>
            <li><a href="#">Contact</a></li>
    </ul><!-- END nav -->   
</div><!-- END nav-wrap -->    

<div id="content">
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
</div>

<div id="footer"></div>   

</body>
</html>

CSS:

/* a[href="http://www.google.com"] {color: green;}   */

html {
   min-height: 100%;
}

body {
  width: 100%;  /*960px;*/
  /* padding:100px 0; */
  margin:0 auto;
  font-family:Calibri, sans-serif;
}

#body1 {
 background-image:url('speckle.jpg');
 background-repeat:repeat;
}

#content {
     width: 90%;
     margin-left: 3%;
     margin-top: 90px;
     margin-bottom: 45px;
}

#nav-wrap {
  position: fixed;
  top: 10px;
  width: 100%;
  height: 55px;
  /*background: #336699;*/
}    

#nav {
  /*border:1px solid #ccc;*/
  /*border-width:1px 0;*/
  list-style:none;
  margin: 0 auto 0 auto;
  padding:0;
  width: 400px;
  text-align:center;
}

#nav li {
  position:relative;
  display:inline;
}

#nav a {
  display:inline-block;
  /*padding:10px;*/
  padding: 8px;   /* 8 pixel padding all the way around the anchors */
}

#nav ul {
  position:absolute;
  /*top:100%; Uncommenting this makes the dropdowns work in IE7 but looks a little worse in all   other   browsers. Your call. */
  left:-9999px; /* hide the unordered list by moving it off-screen. */
  margin:0;
  padding:0;
  text-align:left;
}

#nav ul li {
  display:block;
}

#nav li:hover ul {
  left:0px; /* show the sub-items in the unordered list by moving it back under the list */
}

#nav li:hover a {  /* highlight the sub-items when you move over them */
  /*border-bottom:1px solid grey;*/
  /*text-decoration:underline;*/
  /*border-bottom-width: thick;*/
  /*background:#f1f1f1;*/
}

#nav li:hover ul a {
  text-decoration:none;
  background:#EEE;
  border-bottom:1px solid #aaa;  
}

#nav li:hover ul a:hover {
  /*text-decoration:underline;*/
  border-bottom:1px solid #aaa;
  /*background:#f1f1f1;*/
  background: #BEBEBE;
}

#nav ul a {
  white-space:nowrap;
  display:block;
  /*border-bottom:3px solid red;*/
}

a {
  /*color:#c00;*/
  color: black;
  text-decoration:none;
  /*font-weight:bold;*/
  font-weight: normal;
}

a:hover {
  /*text-decoration:underline;*/
  border-bottom: 3px solid #002EB8;
 /*background:#f1f1f1;*/
}

#footer {
  visibility: none;    
}
4

1 に答える 1

0

FirebugまたはChromeJavascriptコンソールを使用してページを検査できます。問題は、ポートフォリオにカーソルを合わせたときのドロップダウンにあります。ホバーされていないときのドロップダウンメニューは次のとおりです。 

<div id="wsite-menus">
    <div style="position: absolute; left: 203.35px; display: none; top: 166px;" class="wsite-menu-wrap">
    </div>
</div>


「Home」から「Portfolio」にカーソルを合わせると、「top」cssプロパティは「168px」に設定されますが、「Contact」から「Portfolio」にカーソルを合わせると、「top」プロパティは166pxのままになります。したがって、ドロップダウンメニューは実際には下線を覆っていますが、ここでは下線は問題ではありません。

于 2013-01-03T02:03:31.840 に答える