1
に対して水平サブメニューを作成しますか？は、私がこの</p> <p>のようなメインメニューのホバーしかし、これは私が</p> <p>どのように私はこの問題を解決するかを作ってきたものであるとき、水平方向のサブメニューを作成するCSS
しかし、私はしたい、このenter image description here
/******************************* ***************************************/
body {
margin: 0;
padding: 0;
}
#iri-header {
font-family: 'Iranian Sans';
font-size: 15px;
line-height: 1.142;
display: block;
border: 0;
width: 1349px;
height: 40.5px;
border-bottom: 1px solid gray;
}
#orb-header {
position: relative;
}
.iri-header-container {
width: 1008px;
height: 39.5px;
margin: 0 auto;
border: 0;
padding: 0 16px;
}
.logo {
width: 96px;
height: 39.5px;
border-left: 1px solid black;
float: right;
}
.logo img {
float: right;
padding-top: 8px;
}
.loging {
width: 197.5px;
height: 39.5px;
float: right;
cursor: pointer;
border-left: 1px solid black;
}
.loging:hover {
border-bottom: 2px solid black;
}
#vorod {
float: right;
padding: 12px;
}
.loging img {
width: 30px;
height: 30px;
margin-top: 6px;
margin-left: 8px;
}
.search {
width: 300px;
height: 39.5px;
border-right: 1px solid black;
}
.Search {
width: 45px;
height: 39.5px;
float: right;
margin-right: 10px;
}
.Search img {
width: 100%;
height: 100%;
}
.brand {
width: 1349px;
height: 95px;
background-color: #BB1919;
display: block;
border: 0;
position: relative;
}
.site-brand {
width: 976px;
height: 59px;
margin: 0 auto;
}
.brand .site-brand a > span {
float: right;
font-family: A Ketab;
font-size: 35px;
margin-top: 6px;
color: #ffffff;
text-decoration: none;
}
.menu {
width: 1349px;
height: 36px;
}
.menu-container {
width: 1349px;
height: 35px;
background-color: #A91717;
}
.menu-ul {
margin: 0 auto;
height: 35px;
}
#main_menu {
list-style: none;
float: right;
margin-right: 93px;
font-size: 16px;
}
#main_menu li {
display: inline-block;
vertical-align: bottom;
}
#main_menu li a {
display: block;
padding: 10px; /* For example */
position: relative;
}
li a {
display: inline-block; /* To enable padding */
padding: 10px; /* For example */
}
li:not(:hover) .submenu {
display: none;
}
li:hover .submenu {
position: absolute;
right: 0; /* If you want to stick it to the left edge, remove this line. */
white-space: nowrap;
}
#main_menu li:hover {
background-color: #eb4b4b;
}
#main_menu li ul {
list-style: none;
background-color: #820e0e;
position: absolute;
width: 100%;
float: right;
display: none;
direction: rtl;
margin-right: 60px;
}
#main_menu li:hover ul {
display: block;
}
#main_menu li ul li {
float: left;
direction: rtl;
border-bottom: 1px solid #BB4545;
display: block;
}
#main_menu li ul li a {
float: none;
display: block;
}
li {
display: inline-block;
position: relative;
vertical-align: bottom;
}<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>سایت IRI</title>
<link href="~/Content/StyleSheet.css" rel="stylesheet" />
<script src="~/Scripts/bootstrap.min.js"></script>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap-rtl.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap-theme-rtl.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-3.1.0.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
</head>
<div>
<header id="iri-header">
<div id="orb-header">
<div class="iri-header-container">
<div class="logo">
<a href="#">
<img src="~/Content/img/Logo.png" />
</a>
</div>
<div class="loging">
<a href="/Home/Register">
<div class="loging-container">
<span id="vorod">ورود/ثبت نام</span>
<img src="~/Content/img/pic1.png" />
</div>
</a>
</div>
<div class="search">
@Html.Partial("P_Search")
</div>
</div>
</div>
</header>
<div class="brand">
<div class="site-brand">
<a href="/Home/Index">
<span>اخبار ایران و جهان</span>
</a>
</div>
<div class="menu">
<div class="menu-container">
<div class="menu-ul">
<ul id="main_menu">
<li><a href="#">1صفحه اصلی</a></li>
<li><a href="#">صفحه اصلی2</a></li>
<li><a href="#">3صفحه اصلی</a></li>
<li><a href="#">4صفحه اصلی</a></li>
<li>
<a href="#">صفحه اصلی5</a>
<ul class="sub-menu">
<li><a href="#">صفحه اصلی</a></li>
<li><a href="#">صفحه اصلی</a></li>
<li><a href="#">صفحه اصلی</a></li>
<li><a href="#">صفحه اصلی</a></li>
</ul>
</li>
<li><a href="#">صفحه اصلی6</a></li>
<li><a href="#">7صفحه اصلی</a></li>
<li>
<a href="#">8صفحه اصلی</a>
<ul class="sub-menu">
<li><a href="#">صفحه اصلی</a></li>
<li><a href="#">صفحه اصلی</a></li>
<li><a href="#">صفحه اصلی</a></li>
<li><a href="#">صفحه اصلی</a></li>
</ul>
</li>
<li><a href="#">صفحه اصلی9</a></li>
<li><a href="#">10صفحه اصلی</a></li>
<li><a href="#">صفحه اصلی11</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
YSE。ありがとう。私の質問では写真を見てください。編集 – Kianoush
コードを今すぐ確認http://codepen.io/bra1N/pen/yJwZWo – ristapk