我一直在努力在下拉菜单中创建悬停效果。它完美地适用于菜单部分的所有项目,但当我尝试在下拉菜单上实现相同的效果时它会变得混乱。
@charset "utf-8";
/* CSS Document */
body {
font-family: 'Droid Serif', serif;
margin: 0;
padding: 0;
}
.page {
width: 100%;
margin: 0;
padding: 0;
}
/* ================ Nav =============================== */
.nav {
width: 100%;
padding: 0;
margin: 0;
background: #ECF0F1;
}
.navcontain {
width: 1200px;
padding: 0;
margin: 0 auto;
overflow: hidden;
}
.logo {
display: block;
width: 300px;
float: left;
}
.logo a {
display: inline-block;
text-decoration: none;
color: #353535;
font-size: 36px;
font-weight: 900;
letter-spacing: -1.1px;
padding: 15px 0px;
}
.menu {
padding: 0;
margin: 0;
width: 900px;
float: right;
}
.menu ul {
padding: 0;
margin: 0;
float: right;
margin-top: 10px;
}
.menu ul li {
display: inline-block;
float: left;
list-style: none;
margin-left: 20px;
}
.menu ul li:hover {
border-top: 2px solid #2980B9;
}
.menu ul li a {
display: inline-block;
color: #313131;
text-decoration: none;
padding: 10px 15px;
text-transform: uppercase;
font-size: 15px;
}
.menu ul ul {
position: absolute;
left: -9999px;
}
.menu ul li:hover ul {
left: auto;
}
.menu ul li ul li {
float: none;
display: block;
margin-left: 0px;
}
.menu ul li ul li a {
display: inline-block;
padding: 8px 15px;
text-transform: uppercase;
font-size: 15px;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Business Websites</title>
<link type="text/css" rel="stylesheet" href="style.css">
<link href='https://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="page">
<!-- ================ Nav Section ======================-->
<div class="nav">
<div class="navcontain">
<div class="logo">
<a href="#">Logo Design</a>
</div><!-- Logo -->
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Ecommerce Design</a></li>
<li><a href="#">Brochure Design</a></li>
</ul>
</li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div><!-- Menu --->
</div><!-- nav contain -->
</div><!-- nav --->
<!-- ========== Hero Image Section ===================-->
<div class="hero">
<div class="herocontain">
<div class="herored">
<p>Best Web Designing Company In India</p>
<img src="img/man.png" alt="man">
</div><!-- Hero Red -->
</div><!-- Hero Contain -->
</div><!-- Hero -->
<!-- ====================================== Four Block Section ==================================-->
<div class="four">
<div class="fourblocks">
<div class="textblock">
<img src="img/middleicon.png" alt="icon">
<h3>Clean Theme</h3>
<p>Ut nec lorem id orci convallis porta. Donec pharetra neque eu velit dictum molestie.
Duis porta gravida augue sed viverra. Quisque at nulla leo, non aliquet mi. </p>
<a href="#">Read More</a>
</div><!-- Text Block -->
<div class="textblock">
<img src="img/middleicon.png" alt="icon">
<h3>Clean Theme</h3>
<p>Ut nec lorem id orci convallis porta. Donec pharetra neque eu velit dictum molestie.
Duis porta gravida augue sed viverra. Quisque at nulla leo, non aliquet mi. </p>
<a href="#">Read More</a>
</div><!-- Text Block -->
<div class="textblock">
<img src="img/middleicon.png" alt="icon">
<h3>Clean Theme</h3>
<p>Ut nec lorem id orci convallis porta. Donec pharetra neque eu velit dictum molestie.
Duis porta gravida augue sed viverra. Quisque at nulla leo, non aliquet mi. </p>
<a href="#">Read More</a>
</div><!-- Text Block -->
<div class="textblock">
<img src="img/middleicon.png" alt="icon">
<h3>Clean Theme</h3>
<p>Ut nec lorem id orci convallis porta. Donec pharetra neque eu velit dictum molestie.
Duis porta gravida augue sed viverra. Quisque at nulla leo, non aliquet mi. </p>
<a href="#">Read More</a>
</div><!-- Text Block -->
</div><!-- Four Blocks -->
</div><!-- Four -->
<!-- ====================================== Lastest Work ==================================-->
<div class="portfolio">
<div class="port">
<div class="topport">
<h3>Our Latest Works</h3>
</div><!-- topport -->
<div class="items">
<div class="item">
<img src="img/member1.jpg">
</div>
<div class="item">
<img src="img/member2.jpg">
</div>
<div class="item">
<img src="img/member3.jpg">
</div>
<div class="item">
<img src="img/member3.jpg">
</div>
</div><!-- items -->
</div><!-- Port -->
</div><!-- portfolio -->
<!-- ====================================== testimonials ==================================-->
<div class="testimonial">
<div class="testcontain">
<div class="lefttestimonial">
<div class="whiteleft">
<h3>Testimonial</h3>
<p>Lorem ipsum dolor sit amet, aliquam iracundia ullamcorper ea vix, vix idque philosophia et, sea ex iriure scripta.
In malis vivendo posidonium cum, ex mutat nulla oratio vim.
Ea cum assum integre quaeque, te duo homero antiopam erroribus, nec ut latine accumsan appetere.
Ignota persecuti an qui, in quas zril eloquentiam vis.</p>
<p>James Johnson, President of Web Designing X</p>
</div><!-- whiteleft -->
</div><!-- Left testimonial -->
<div class="righttestimonial">
<div class="rightwhite">
<h3>Our Clients</h3>
<ul>
<li><img src="img/cnn.png"></li>
<li><img src="img/cnn.png"></li>
<li><img src="img/cnn.png"></li>
<li><img src="img/cnn.png"></li>
<li><img src="img/cnn.png"></li>
<li><img src="img/cnn.png"></li>
</ul>
</div><!-- right white -->
</div><!-- Right Testimonial -->
</div><!-- test contain -->
</div><!-- Testimonial -->
<!-- ====================================== Call to Action ==================================-->
<div class="download">
<div class="downloadcontain">
<div class="downtext">
<p>
Natum commodo cu est, solet repudiandae sea cu. Mutat nihil forensibus quo ut.
Eu ubique pertinacia incorrupte usu, in vix quem sensibus, sea fugit conceptam ei.
In inermis philosophia vis, sumo vituperata ne mei, no dico dolorum vix.
Labores feugait salutatus ius no. Id vix vide ceteros, sale tempor te sea.
</p>
</div>
<a href="#">Download</a>
</div><!-- Download Contain -->
</div><!-- download -->
<!-- ====================================== Footer ==================================-->
<div class="footer">
<div class="footercontain">
<div class="footerblock">
<h3>About Us</h3>
<p>Natum commodo cu est, solet repudiandae sea cu. Mutat nihil forensibus quo ut.
Eu ubique pertinacia incorrupte usu, in vix quem sensibus, sea fugit conceptam ei.
In inermis philosophia vis, sumo vituperata ne mei, no dico dolorum vix.
Labores feugait salutatus ius no. Id vix vide ceteros, sale tempor te sea.
</p>
</div><!-- footer block -->
<div class="footerblock">
<h3>Pages</h3>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div><!-- footer block -->
<div class="footerblock">
<h3>Contact Us</h3>
<p>Web Designing X<br>
Gangpur, Burdwan<br>
India<br>
Phone - 8000000<br>
Email - info@example.com<br>
</p>
</div><!-- footer block -->
<div class="footerblock">
<h3>Connect With Us</h3>
<ul>
<li><img src="img/images/Social-media-circle-icons-pack_03.png"></li>
<li><img src="img/images/Social-media-circle-icons-pack_07.png"></li>
<li><img src="img/images/Social-media-circle-icons-pack_05.png"></li>
<li><img src="img/images/Social-media-circle-icons-pack_03.png"></li>
<li><img src="img/images/Social-media-circle-icons-pack_07.png"></li>
<li><img src="img/images/Social-media-circle-icons-pack_05.png"></li>
</ul>
</div><!-- footer block -->
</div><!--- footer contain -->
</div><!--- footer --->
</div><!--page-->
</body>
</html>
检查此图片..下拉菜单没有顶部导航菜单上显示的蓝色顶部边框。
此外,我在下拉菜单部分选择单个项目时遇到困难..
我在CSS部分做错了什么?
答案 0 :(得分:1)
@charset "utf-8";
/* CSS Document */
body {
font-family: 'Droid Serif', serif;
margin: 0;
padding: 0;
}
.page {
width: 100%;
margin: 0;
padding: 0;
}
/* ================ Nav =============================== */
.nav {
width: 100%;
padding: 0;
margin: 0;
background: #ECF0F1;
}
.navcontain {
width: 1200px;
padding: 0;
margin: 0 auto;
overflow: hidden;
}
.logo {
display: block;
width: 300px;
float: left;
}
.logo a {
display: inline-block;
text-decoration: none;
color: #353535;
font-size: 36px;
font-weight: 900;
letter-spacing: -1.1px;
padding: 15px 0px;
}
.menu {
padding: 0;
margin: 0;
width: 900px;
float: right;
}
.menu ul {
padding: 0;
margin: 0;
float: right;
margin-top: 10px;
}
.menu ul li {
display: inline-block;
float: left;
list-style: none;
margin-left: 20px;
}
.menu ul li:hover {
border-top: 2px solid #2980B9;
}
.menu ul li a {
display: inline-block;
color: #313131;
text-decoration: none;
padding: 10px 15px;
text-transform: uppercase;
font-size: 15px;
}
.menu ul ul {
position: absolute;
left: -9999px;
top:40px;white-space: nowrap;
}
.menu ul li:hover ul {
left: auto;
}
.menu ul li ul li {
float: none;
display: block;
margin-left: 0px;
}
.menu ul li ul li a {
display: inline-block;
padding: 8px 15px;
text-transform: uppercase;
font-size: 15px;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Business Websites</title>
<link type="text/css" rel="stylesheet" href="style.css">
<link href='https://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="page">
<!-- ================ Nav Section ======================-->
<div class="nav">
<div class="navcontain">
<div class="logo">
<a href="#">Logo Design</a>
</div><!-- Logo -->
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Ecommerce Design</a></li>
<li><a href="#">Brochure Design</a></li>
</ul>
</li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div><!-- Menu --->
</div><!-- nav contain -->
</div><!-- nav --->
<!-- ========== Hero Image Section ===================-->
<div class="hero">
<div class="herocontain">
<div class="herored">
<p>Best Web Designing Company In India</p>
<img src="img/man.png" alt="man">
</div><!-- Hero Red -->
</div><!-- Hero Contain -->
</div><!-- Hero -->
<!-- ====================================== Four Block Section ==================================-->
<div class="four">
<div class="fourblocks">
<div class="textblock">
<img src="img/middleicon.png" alt="icon">
<h3>Clean Theme</h3>
<p>Ut nec lorem id orci convallis porta. Donec pharetra neque eu velit dictum molestie.
Duis porta gravida augue sed viverra. Quisque at nulla leo, non aliquet mi. </p>
<a href="#">Read More</a>
</div><!-- Text Block -->
<div class="textblock">
<img src="img/middleicon.png" alt="icon">
<h3>Clean Theme</h3>
<p>Ut nec lorem id orci convallis porta. Donec pharetra neque eu velit dictum molestie.
Duis porta gravida augue sed viverra. Quisque at nulla leo, non aliquet mi. </p>
<a href="#">Read More</a>
</div><!-- Text Block -->
<div class="textblock">
<img src="img/middleicon.png" alt="icon">
<h3>Clean Theme</h3>
<p>Ut nec lorem id orci convallis porta. Donec pharetra neque eu velit dictum molestie.
Duis porta gravida augue sed viverra. Quisque at nulla leo, non aliquet mi. </p>
<a href="#">Read More</a>
</div><!-- Text Block -->
<div class="textblock">
<img src="img/middleicon.png" alt="icon">
<h3>Clean Theme</h3>
<p>Ut nec lorem id orci convallis porta. Donec pharetra neque eu velit dictum molestie.
Duis porta gravida augue sed viverra. Quisque at nulla leo, non aliquet mi. </p>
<a href="#">Read More</a>
</div><!-- Text Block -->
</div><!-- Four Blocks -->
</div><!-- Four -->
<!-- ====================================== Lastest Work ==================================-->
<div class="portfolio">
<div class="port">
<div class="topport">
<h3>Our Latest Works</h3>
</div><!-- topport -->
<div class="items">
<div class="item">
<img src="img/member1.jpg">
</div>
<div class="item">
<img src="img/member2.jpg">
</div>
<div class="item">
<img src="img/member3.jpg">
</div>
<div class="item">
<img src="img/member3.jpg">
</div>
</div><!-- items -->
</div><!-- Port -->
</div><!-- portfolio -->
<!-- ====================================== testimonials ==================================-->
<div class="testimonial">
<div class="testcontain">
<div class="lefttestimonial">
<div class="whiteleft">
<h3>Testimonial</h3>
<p>Lorem ipsum dolor sit amet, aliquam iracundia ullamcorper ea vix, vix idque philosophia et, sea ex iriure scripta.
In malis vivendo posidonium cum, ex mutat nulla oratio vim.
Ea cum assum integre quaeque, te duo homero antiopam erroribus, nec ut latine accumsan appetere.
Ignota persecuti an qui, in quas zril eloquentiam vis.</p>
<p>James Johnson, President of Web Designing X</p>
</div><!-- whiteleft -->
</div><!-- Left testimonial -->
<div class="righttestimonial">
<div class="rightwhite">
<h3>Our Clients</h3>
<ul>
<li><img src="img/cnn.png"></li>
<li><img src="img/cnn.png"></li>
<li><img src="img/cnn.png"></li>
<li><img src="img/cnn.png"></li>
<li><img src="img/cnn.png"></li>
<li><img src="img/cnn.png"></li>
</ul>
</div><!-- right white -->
</div><!-- Right Testimonial -->
</div><!-- test contain -->
</div><!-- Testimonial -->
<!-- ====================================== Call to Action ==================================-->
<div class="download">
<div class="downloadcontain">
<div class="downtext">
<p>
Natum commodo cu est, solet repudiandae sea cu. Mutat nihil forensibus quo ut.
Eu ubique pertinacia incorrupte usu, in vix quem sensibus, sea fugit conceptam ei.
In inermis philosophia vis, sumo vituperata ne mei, no dico dolorum vix.
Labores feugait salutatus ius no. Id vix vide ceteros, sale tempor te sea.
</p>
</div>
<a href="#">Download</a>
</div><!-- Download Contain -->
</div><!-- download -->
<!-- ====================================== Footer ==================================-->
<div class="footer">
<div class="footercontain">
<div class="footerblock">
<h3>About Us</h3>
<p>Natum commodo cu est, solet repudiandae sea cu. Mutat nihil forensibus quo ut.
Eu ubique pertinacia incorrupte usu, in vix quem sensibus, sea fugit conceptam ei.
In inermis philosophia vis, sumo vituperata ne mei, no dico dolorum vix.
Labores feugait salutatus ius no. Id vix vide ceteros, sale tempor te sea.
</p>
</div><!-- footer block -->
<div class="footerblock">
<h3>Pages</h3>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div><!-- footer block -->
<div class="footerblock">
<h3>Contact Us</h3>
<p>Web Designing X<br>
Gangpur, Burdwan<br>
India<br>
Phone - 8000000<br>
Email - info@example.com<br>
</p>
</div><!-- footer block -->
<div class="footerblock">
<h3>Connect With Us</h3>
<ul>
<li><img src="img/images/Social-media-circle-icons-pack_03.png"></li>
<li><img src="img/images/Social-media-circle-icons-pack_07.png"></li>
<li><img src="img/images/Social-media-circle-icons-pack_05.png"></li>
<li><img src="img/images/Social-media-circle-icons-pack_03.png"></li>
<li><img src="img/images/Social-media-circle-icons-pack_07.png"></li>
<li><img src="img/images/Social-media-circle-icons-pack_05.png"></li>
</ul>
</div><!-- footer block -->
</div><!--- footer contain -->
</div><!--- footer --->
</div><!--page-->
</body>
</html>
答案 1 :(得分:0)
你可以尝试这个:
<div class="page">
<!-- ================ Nav Section ======================-->
<div class="nav">
<div class="navcontain">
<div class="logo">
<a href="#">Logo Design</a>
</div><!-- Logo -->
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Ecommerce Design</a></li>
<li><a href="#">Brochure Design</a></li>
</ul>
</li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div><!-- Menu --->
</div><!-- nav contain -->
</div><!-- nav --->
<!-- ========== Hero Image Section ===================-->
<div class="hero">
<div class="herocontain">
<div class="herored">
<p>Best Web Designing Company In India</p>
<img src="img/man.png" alt="man">
</div><!-- Hero Red -->
</div><!-- Hero Contain -->
</div><!-- Hero -->
<!-- ====================================== Four Block Section ==================================-->
<div class="four">
<div class="fourblocks">
<div class="textblock">
<img src="img/middleicon.png" alt="icon">
<h3>Clean Theme</h3>
<p>Ut nec lorem id orci convallis porta. Donec pharetra neque eu velit dictum molestie.
Duis porta gravida augue sed viverra. Quisque at nulla leo, non aliquet mi. </p>
<a href="#">Read More</a>
</div><!-- Text Block -->
<div class="textblock">
<img src="img/middleicon.png" alt="icon">
<h3>Clean Theme</h3>
<p>Ut nec lorem id orci convallis porta. Donec pharetra neque eu velit dictum molestie.
Duis porta gravida augue sed viverra. Quisque at nulla leo, non aliquet mi. </p>
<a href="#">Read More</a>
</div><!-- Text Block -->
<div class="textblock">
<img src="img/middleicon.png" alt="icon">
<h3>Clean Theme</h3>
<p>Ut nec lorem id orci convallis porta. Donec pharetra neque eu velit dictum molestie.
Duis porta gravida augue sed viverra. Quisque at nulla leo, non aliquet mi. </p>
<a href="#">Read More</a>
</div><!-- Text Block -->
<div class="textblock">
<img src="img/middleicon.png" alt="icon">
<h3>Clean Theme</h3>
<p>Ut nec lorem id orci convallis porta. Donec pharetra neque eu velit dictum molestie.
Duis porta gravida augue sed viverra. Quisque at nulla leo, non aliquet mi. </p>
<a href="#">Read More</a>
</div><!-- Text Block -->
</div><!-- Four Blocks -->
</div><!-- Four -->
<!-- ====================================== Lastest Work ==================================-->
<div class="portfolio">
<div class="port">
<div class="topport">
<h3>Our Latest Works</h3>
</div><!-- topport -->
<div class="items">
<div class="item">
<img src="img/member1.jpg">
</div>
<div class="item">
<img src="img/member2.jpg">
</div>
<div class="item">
<img src="img/member3.jpg">
</div>
<div class="item">
<img src="img/member3.jpg">
</div>
</div><!-- items -->
</div><!-- Port -->
</div><!-- portfolio -->
<!-- ====================================== testimonials ==================================-->
<div class="testimonial">
<div class="testcontain">
<div class="lefttestimonial">
<div class="whiteleft">
<h3>Testimonial</h3>
<p>Lorem ipsum dolor sit amet, aliquam iracundia ullamcorper ea vix, vix idque philosophia et, sea ex iriure scripta.
In malis vivendo posidonium cum, ex mutat nulla oratio vim.
Ea cum assum integre quaeque, te duo homero antiopam erroribus, nec ut latine accumsan appetere.
Ignota persecuti an qui, in quas zril eloquentiam vis.</p>
<p>James Johnson, President of Web Designing X</p>
</div><!-- whiteleft -->
</div><!-- Left testimonial -->
<div class="righttestimonial">
<div class="rightwhite">
<h3>Our Clients</h3>
<ul>
<li><img src="img/cnn.png"></li>
<li><img src="img/cnn.png"></li>
<li><img src="img/cnn.png"></li>
<li><img src="img/cnn.png"></li>
<li><img src="img/cnn.png"></li>
<li><img src="img/cnn.png"></li>
</ul>
</div><!-- right white -->
</div><!-- Right Testimonial -->
</div><!-- test contain -->
</div><!-- Testimonial -->
<!-- ====================================== Call to Action ==================================-->
<div class="download">
<div class="downloadcontain">
<div class="downtext">
<p>
Natum commodo cu est, solet repudiandae sea cu. Mutat nihil forensibus quo ut.
Eu ubique pertinacia incorrupte usu, in vix quem sensibus, sea fugit conceptam ei.
In inermis philosophia vis, sumo vituperata ne mei, no dico dolorum vix.
Labores feugait salutatus ius no. Id vix vide ceteros, sale tempor te sea.
</p>
</div>
<a href="#">Download</a>
</div><!-- Download Contain -->
</div><!-- download -->
<!-- ====================================== Footer ==================================-->
<div class="footer">
<div class="footercontain">
<div class="footerblock">
<h3>About Us</h3>
<p>Natum commodo cu est, solet repudiandae sea cu. Mutat nihil forensibus quo ut.
Eu ubique pertinacia incorrupte usu, in vix quem sensibus, sea fugit conceptam ei.
In inermis philosophia vis, sumo vituperata ne mei, no dico dolorum vix.
Labores feugait salutatus ius no. Id vix vide ceteros, sale tempor te sea.
</p>
</div><!-- footer block -->
<div class="footerblock">
<h3>Pages</h3>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div><!-- footer block -->
<div class="footerblock">
<h3>Contact Us</h3>
<p>Web Designing X<br>
Gangpur, Burdwan<br>
India<br>
Phone - 8000000<br>
Email - info@example.com<br>
</p>
</div><!-- footer block -->
<div class="footerblock">
<h3>Connect With Us</h3>
<ul>
<li><img src="img/images/Social-media-circle-icons-pack_03.png"></li>
<li><img src="img/images/Social-media-circle-icons-pack_07.png"></li>
<li><img src="img/images/Social-media-circle-icons-pack_05.png"></li>
<li><img src="img/images/Social-media-circle-icons-pack_03.png"></li>
<li><img src="img/images/Social-media-circle-icons-pack_07.png"></li>
<li><img src="img/images/Social-media-circle-icons-pack_05.png"></li>
</ul>
</div><!-- footer block -->
</div><!--- footer contain -->
</div><!--- footer --->
</div><!--page-->
答案 2 :(得分:0)
好的,我在两小时后找到了解决方案..这是一个愚蠢的错误..
我正在为ul ul元素分配margin-top:45px,这就是我在选择子菜单时遇到困难的原因
..我们只需删除它并补偿该空间,我们需要添加此代码 -
.menu ul ul li:first-child {
margin-top: 40px;
}
&#13;