这就是问题所在。
我希望那些Mobile
和brand names
在另一个之下。
* {
padding: 0px;
margin: 0px;
}
.Heading {
font-family: tahoma;
width: auto;
height: 190px;
color: white;
font-weight: bolder;
padding-top: 3%;
padding-left: 2%;
}
.Nav {
padding-top: 12px;
padding-left: 390px;
list-style: none;
.
}
body {
background: url("IMG2.jpg")no-repeat;
background-size: 100%;
}
ul li {
float: left;
padding: 3.5%;
width: 15%;
background-color: black;
opacity: .6;
color: white;
height: 2%;
padding-top: 2%;
margin-right: 2px;
display: block;
}
ul li ul li {
width: 150%;
height: 900%;
background: grey;
opacity: .9;
font-size: x-large;
text-align: center;
line-height: 40px;
font-family: cursive;
float: left;
text-align: cente
}
#M {
padding-top: 15%;
padding-right: 30%;
}

<!doctype>
<!DOCTYPE html>
<html>
<head>
<title>Gadgets.info</title>
<link rel="stylesheet" type="text/css" href="P2CSS.css">
<body>
<div class="Heading">
<h1><u>
Gadgets</u> <u>Info
</u> </h1>
<ul>
<li>
Mobiles
<div id="M">
<ul>
<li>Android</li>
<li>Windows</li>
<li>iOS</li>
</ul>
</div>
</li>
<li>
Laptops
<ul>
<li>i3</li>
<li>i5</li>
<li>i7</li>
</ul>
</li>
<li>
Speakers
<ul>
<li>Bluetooth</li>
<li>Wired</li>
</ul>
</li>
<li>
Others
</li>
</ul>
</div>
</head>
</body>
</html>
&#13;
答案 0 :(得分:0)
只需将一些css应用于子菜单,例如我的代码段
* {
padding: 0px;
margin: 0px;
}
.Heading {
font-family: tahoma;
width: auto;
height: 190px;
color: white;
font-weight: bolder;
padding-top: 3%;
padding-left: 2%;
}
.Nav {
padding-top: 12px;
padding-left: 390px;
list-style: none;
.
}
body {
background: url("IMG2.jpg")no-repeat;
background-size: 100%;
}
ul li {
float: left;
padding: 3.5%;
width: 15%;
background-color: black;
opacity: .6;
color: white;
height: 2%;
padding-top: 2%;
margin-right: 2px;
display: block;
position: relative;
}
ul li ul li {
width: 100%;
height: 900%;
background: grey;
opacity: .9;
font-size: large;
text-align: center;
line-height: 40px;
font-family: cursive;
float: left;
padding: 0;
}
#M {
padding-top: 0;
padding-right: 30%;
}
ul.submenu {
position: absolute;
top: 100%;
left: 0;
width: 100%;
}
<!doctype>
<!DOCTYPE html>
<html>
<head>
<title>Gadgets.info</title>
<link rel="stylesheet" type="text/css" href="P2CSS.css">
</head>
<body>
<div class="Heading">
<h1><u>
Gadgets</u> <u>Info
</u> </h1>
<ul>
<li>
Mobiles
<div id="M">
<ul class="submenu">
<li>Android</li>
<li>Windows</li>
<li>iOS</li>
</ul>
</div>
</li>
<li>
Laptops
<ul class="submenu">
<li>i3</li>
<li>i5</li>
<li>i7</li>
</ul>
</li>
<li>
Speakers
<ul class="submenu">
<li>Bluetooth</li>
<li>Wired</li>
</ul>
</li>
<li>
Others
</li>
</ul>
</div>
</body>
</html>
答案 1 :(得分:0)
右移:0;也会解决问题。
* {
padding: 0px;
margin: 0px;
}
.Heading {
font-family: tahoma;
width: auto;
height: 190px;
color: white;
font-weight: bolder;
padding-top: 3%;
padding-left: 2%;
}
.Nav {
padding-top: 12px;
padding-left: 390px;
list-style: none;
.
}
body {
background: url("IMG2.jpg")no-repeat;
background-size: 100%;
}
ul li {
float: left;
padding: 3.5%;
width: 15%;
background-color: black;
opacity: .6;
color: white;
height: 2%;
padding-top: 2%;
margin-right: 2px;
display: block;
position: relative;
}
ul li ul li {
width: 100%;
height: 900%;
background: grey;
opacity: .9;
font-size: large;
text-align: center;
line-height: 40px;
font-family: cursive;
float: left;
padding: 0;
}
#M {
padding-top: 0;
padding-right: 30%;
}
ul.submenu {
position: absolute;
top: 100%;
right: 0;
width: 100%;
}
<!doctype>
<!DOCTYPE html>
<html>
<head>
<title>Gadgets.info</title>
<link rel="stylesheet" type="text/css" href="P2CSS.css">
</head>
<body>
<div class="Heading">
<h1><u>
Gadgets</u> <u>Info
</u> </h1>
<ul>
<li>
Mobiles
<div id="M">
<ul class="submenu">
<li>Android</li>
<li>Windows</li>
<li>iOS</li>
</ul>
</div>
</li>
<li>
Laptops
<ul class="submenu">
<li>i3</li>
<li>i5</li>
<li>i7</li>
</ul>
</li>
<li>
Speakers
<ul class="submenu">
<li>Bluetooth</li>
<li>Wired</li>
</ul>
</li>
<li>
Others
</li>
</ul>
</div>
</body>
</html>