萌新求助...做的網頁導航欄二級選單出了點問題.求大佬指點-有解無憂

正在做學校一個網頁選修課的作業，編程基礎幾乎為0，代碼也是零零散散跟著網課敲出來的，結果在這個地方卡了老久都找不到失誤的原因，快要交作業了，好焦慮啊

想要做成下圖這樣的下拉選單

但是最后我做成了這樣

點擊product之后，出現了如下圖的迷之縫隙。。。

到底是哪里出了問題呢

html代碼這是整個導航欄

參考

   <div class="nav">
        <div id="one">
        <a href="https://bbs.csdn.net/topics/#"><h3>首頁</h3></a>
        </div>
        <div id="navigation">
        <h3>我的收藏</h3>
        <ul>
              <li>
              <div class="title hover">Product</div>
              <div class="con">
                   <a href="https://bbs.csdn.net/topics/#"><p>Sketch</p></a>
                   <a href="https://bbs.csdn.net/topics/#"><p>Rendering</p></a>
                   <p>Model</p>
                   <p>Technology</p>
              </div>
              </li>
              <li>
              <div class="title ">Nature</div>
              <div class="con" >
                   <p>Animal</p>
                   <a href="https://bbs.csdn.net/topics/#"><p>Scenery</p></a>
              </div>
              </li>
              <li>
              <div class="title ">Architecture</div>

              </li>
              <li>
              <div class="title ">Painting</div>

              </li>
        </ul>
        </div>
        <div id="two">
        <h3>留言板</h3>
        </div>
     </div>

這是css代碼

.nav{
height:100px;
width:1280px;
background-color:#1c1f24;
position:absolute;
padding-top:500px;
}
.nav #one{
font-size:18px;
color:#fff;
font-family:"微軟雅黑";
padding-left:370px;
padding-top:30px;
float:left;
}
.nav a{
text-decoration:none;
color:#fff;
}
.nav h3{
display:block;
height:70px;
}
.title{
padding-left:20px;
}
.nav #navigation{
width:210px;
font-size:18px;
color:#fff;
font-family:"微軟雅黑";
padding-left:200px;
padding-top:30px;
float:left;
}
li{
line-height:45px;
border-top:2px solid #666;
background-color:#000;
width:210px;
display:none;

}
.con{
display:none;
background:#4b383a;;
}
.hover{
background-color:#ab7e5f;
}

#navigation p{
font-size:12px;
line-height:35px;
border-top:1px solid #3f4041;
padding-left:40px;
}
.nav #two{
font-size:18px;
color:#fff;
font-family:"微軟雅黑";
padding-left:80px;
padding-top:30px;
float:left;
}

這是jQuery

$(document).ready(function(){

$('#navigation').mouseover(function(){
$(this).find("li").show();
});
$('#navigation').mouseout(function(){
$(this).find("li").hide();
});
$('li').click(function(){
$(this).find('.con').slideToggle().parent().siblings().find('.con').slideUp();
$(this).find('.title').addClass('hover').parent().siblings().find('.title').removeClass('hover');
})
})

真心求助大佬指點

uj5u.com熱心網友回復：

在樣式最前面加上p { margin: 0}，p標簽有默認的margin，在Chrome,Firefox,Safari,Opera,Maxthon,IE8.0中：margin:12px 0px;

在IE6.0,7.0中：margin:19px 0px;

uj5u.com熱心網友回復：

你用h3,p這樣的標簽  瀏覽器都是有默認的樣式的。
在你的css最上邊加
*{
            margin: 0;
           padding: 0;
}
應該就可以了，希望能幫到你

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/117002.html

標籤：HTML(CSS)

上一篇：JAVAEE中的一些問題，請各位大佬幫我答疑解惑，我真的快被搞哭了

下一篇：NGINX配置問題，求助