0 Пользователей и 1 Гость просматривают эту тему.
  • 7 Ответов
  • 4330 Просмотров
*

slavavs

  • Захожу иногда
  • 93
  • 0 / 0
Что делать, если выпадающее меню, вертикальное, выпадая влево, скрыватся за контентом, т.е. выпадает под него. В css не могу найти где исправить. Вот css:

@charset "utf-8";
.container {
   text-align: center;
}
.marginauto {
   text-align: left;
   width: 757px;
   margin: 0 auto;
   padding: 0px;
   border: none;
}
#header {
   background-image: url(../images/content_top.png);
   background-repeat: no-repeat;
   background-position: right bottom;
   height: 140px;
   width: 757px;
   float: left;
}
#header_left {
   height: 140px;
   width: 242px;
   background-image: url(../images/logo.png);
   background-repeat: no-repeat;
   background-position: center;
   float: left;
}
#header_right {
   width: 515px;
   height: 140px;
   float: right;
}
#banner {
   height: 80px;
   float: right;
   text-align: right;
   color: #FFFFFF;
   margin-top: 17px;
   width: 515px;
}
#topmenu {
   height:37px;
   color: #FFFFFF;
   width:515px;
   float: left;
}
#topmenu ul, #topmenu li {
   list-style: none;
   padding: 0;
   margin: 0;
   display: inline;
}
#topmenu a{
   display:block;
   color:#FFFFFF;
   text-decoration:none;
   padding:12px 0px 11px 0px;
   font-size: 12px;
   width: 95px;
   margin-right: 5px;
   text-align: center;
   background-repeat: no-repeat;
   float: left;
}
#topmenu a:hover {
   color: #FFFFFF !important;
   text-decoration: underline;
}
#content_top_out {
   background-image: url(../images/content_top.png);
   width: 757px;
   height: 9px;
   float: right;
   margin: 0px;
   background-repeat: no-repeat;
   background-position: right;
}
#left_out {
   float: left;
   width: 220px;
   overflow: hidden;
}
.left_top {
   height: 19px;
}
.left_content {
   padding-left: 70px;
}
.left_bottom {
   height: 20px;
}
.left_sep {
   height: 10px;
   width: 220px;
}
.left_content ul,
.left_content li {
   list-style-type: none;
   margin: 0px;
}
.left_content ul li a,
.left_content ul li#current a,
.left_content a.mainlevel {
   color: #FFFFFF;
   text-decoration: none;
   height: 27px;
   line-height: 27px;
   display: block;
   font-weight: bold;
}
.left_content ul li a,
.left_content ul li#current ul li, 
.left_content ul li ul li#current a, 
.left_content ul li ul li#current ul li,
.left_content ul li ul li {
   padding-left: 10px;
}
.left_content .menu a:hover,
.left_content li#current li a:hover,
.left_content a.mainlevel:hover,
.left_content a.sublevel:hover {
   text-decoration: underline;
}
li#current a,
#active_menu {
   text-decoration: underline;
}
.left_content a.sublevel,
.left_content li#current li a,
.left_content li li a,
.left_content li li#current a,
.left_content li
.left_content li li#current li a,
.left_content li li li a{
   color: #FFFFFF;
   text-decoration: none;
   height: 20px;
   line-height: 20px;
   display: block;
   font-weight: normal;
}
.left_content li#current li li a {
   color: #FFFFFF;
   text-decoration: none;
   height: 20px;
   line-height: 20px;
   display: block;
   font-weight: normal;
}
#left_out h3, #left_out th {
   background-repeat: repeat-y;
   color: #FFFFFF;
   font-size: 13px;
   font-weight: bold;
   padding: 3px 0px 3px 10px;
   width: 140px;
   margin: 0 0 5px 0;
}
#left_out .moduletable, #left_out .moduletable_menu {
   padding-bottom: 5px;
}
#left_out .moduletable td {
   padding-left: 5px;
}
#submenu_out {
   width: 154px;
   margin: 0px 0px 0px 66px;
}
#submenu_content {
   color: #000000;
   padding-left: 5px;
   background-repeat: repeat-y;
}
#submenu_content .moduletable {
   width: 150px;
}
#submenu_bottom {
   padding-bottom: 20px;
   background-repeat: no-repeat;
   background-position: bottom;
}
#content_out {
   float: left;
   background-repeat: repeat-y;
   background-position: right;
   width: 536px;

}
#content_right_top {
   width: 30px;
   height: 23px;
   float: right;
   background-image: url(../images/content_right_top.png);
   background-repeat: no-repeat;
}
#content {
   padding: 0px 0px 0px 10px;
   float: left;
   width: 496px;
}
#content_in {
   padding: 5px 0px 0px 0px;
}
#user_out {
   padding: 0px 0px 10px 0px;
   margin: 0px;
   width: 496px;
   float: left;
}
.user1  {
   float: left;
}
.user2  {
   float: right;
}
.user1, .user2  {
   width: 240px;
   background-color: #EEEEEE;
   border: 1px solid #999;
}
#user_out .moduletable {
   width: 100%;
}
#user_out th, #user_out h3  {
   font-size: 14px;
   font-weight: bold;
   padding: 5px 10px;
   background-color: #474747;
   text-align: left;
   text-indent: 10px;
   color: #FFFFFF;
}
#maincontent {
   background-image: url(../images/maincontent_bg.png);
   background-repeat: repeat-y;
   background-position: right;
   float: left;
}
#bottom {
   width: 756px;
   float: left;
   background-image: url(../images/bottom.png);
   background-repeat: no-repeat;
   background-position: top right;
   padding: 0px 0px 0px 0px;
}
#bottom  a{
   color: #FFFFFF;
}
.imp {
   height: 30px;
   line-height: 30px;
   text-align: center;
   color: #FFFFFF;
}
.imp a {
   color: #FFFFFF;
}
#othermenu {
   float: right;
   height: 20px;
}
#othermenu ul, #othermenu li {
   margin: 0px;
   padding: 0px;
   display: inline;
   list-style-type: none;
}
#othermenu a:link, #othermenu a:visited {
   font-size: 11px;
   color: #FFFFFF;
   text-decoration: none;
   float: left;
   margin-right: 20px;
}
#othermenu a:hover {
   text-decoration: underline;
}
.pathway {
   padding: 5px 0px;
   font-size: 11px;
   border-bottom: 1px solid #666;
}
#footer {
   float: left;
   color: #FFFFFF;
   padding-left: 230px;
}
.clr {
   clear: both;
}

body {
   font: 12px Tahoma, Verdana, Arial, Helvetica, sans-serif;
   margin: 0;
   padding: 0 0 20px 0;
   text-align: left;
   color: #000000;
   background-image: url(../images/bg.gif);
}
p {
   padding: 0px;
   margin: 0px;
   font-size: 11px;
} /*formatting all <div> (division) items. This is a catch-all that only applies when no other
style has been defined.*/
td, tr {
   font-size: 11px;
}
h1, h2, h3, h4, h5 {
   margin: 0;
   padding: 0;
}
.button {
   background-color: #666666;
   color: #FFFFFF;
   border: 1px;
}
.button:hover {
   background-color: #999999;
}
.inputbox {
   padding: 2px;
}
.inputbox:hover {
   background-color: #DDE8FF;
}
#left_out ul {
   padding: 0px;
   margin: 0px;
}
#content ul {
   padding: 10px 18px;
   margin: 0px;
}
#left_out a {
   color: #FFFFFF;
}
a {
   color: #006699;
} /* general links style*/
a:hover {}
.componentheading {}
.contentheading {
   font-weight: bold;
   font-size: 14px;
   width: 100%;
   color: #FFFFFF;
   padding-left: 10px;
   margin: 0px;
   height: 24px;
}

.contentpane {
   width: 100%;
}
.contentpaneopen {
   width: 100%;
}
.contentdescription {}
.sectiontableheader {}
.sectiontableentry1 {}
.sectiontableentry2 {}
img, .input {
   border: none;
   padding: 0;
   margin: 0;
}
.modifydate {}
.small, .createdate {
}
* {
   font-size: 11px;
}
*

slavavs

  • Захожу иногда
  • 93
  • 0 / 0
Re: выпадающее меню скрывается
« Ответ #1 : 23.12.2008, 13:10:45 »
Вот еще выкладываю html:

ПОМОГИТЕ КТО-НИТЬ


<?php defined( '_JEXEC' ) or die( 'Restricted access' ); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >

<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/blogfolio/css/template.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/blogfolio/css/<?php echo $this->params->get('colorVariation'); ?>.css" type="text/css" />
<link href="css/template.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="container">
<div class="marginauto">
<div id="header">
<div id="header_left"></div>
<div id="header_right">
<div id="banner"><jdoc:include type="module" name="banners" style="xhtml" /></div>
<div id="topmenu"><jdoc:include type="modules" name="user3" style="xhtml" /></div>
</div>
</div>
<div id="maincontent">
<div id="left_out">
<?php if($this->countModules('left')) : ?>
<div class="left_top"></div>
<div class="left_content"><jdoc:include type="modules" name="left" style="table" /></div>
<div class="left_bottom"></div>
<div class="left_sep"></div>
<?php endif; ?>
<div class="left_top"></div>
<div class="left_content"><jdoc:include type="modules" name="user4" style="table" /></div>
<div class="left_bottom"></div>
<?php if($this->countModules('user5')) : ?>
<div id="submenu_out">
<div id="submenu_bottom">
<div id="submenu_content"><jdoc:include type="modules" name="user5" style="table" /></div>
</div>
</div>
<?php endif; ?>
</div>
<div id="content_out">
<div id="content">
<?php if($this->countModules('user1 or user2')) : ?>
<div id="user_out">
<?php if($this->countModules('user1')) : ?>
<div class="user1">
<jdoc:include type="modules" name="user1" style="xhtml" />
</div>
<?php endif; ?>
<?php if($this->countModules('user2')) : ?>
<div class="user2">
<jdoc:include type="modules" name="user2" style="xhtml" />
</div>
<?php endif; ?>
</div>
<?php endif; ?>
<div class="pathway">
<jdoc:include type="module" name="breadcrumbs" />
</div>
<div id="content_in"><jdoc:include type="component" /></div>
</div>
</div>
</div>
<div id="bottom">
<div class="imp">designed by <a href="http://www.vonfio.de">www.vonfio.de</a></div>
<div id="footer"> &copy; <?php echo $mainframe->getCfg('sitename');?><br />designed by <a href="http://www.vonfio.de">www.vonfio.de</a></div>
<div id="othermenu"><jdoc:include type="modules" name="footer" style="xhtml" />
</div>
</div>
<div class="clr"></div>
</div>
</div>
</body>
</html>
*

marbert

  • Захожу иногда
  • 413
  • 9 / 0
Re: выпадающее меню скрывается
« Ответ #2 : 06.01.2009, 19:20:21 »
Вот еще выкладываю html:

ПОМОГИТЕ КТО-НИТЬ
у меня возникла похожая проблема в IE - этот идиот не хочет ни в какую показывать выпадающее меню поверх хэдера - получается, картинка хэдера перекрывает выпадающее меню...

такое только в IE - во всех правильных браузерах подобного идиотизма не наблюдается...

повсему, CSS ни при чем, в Опере, Хроме и ФФоксе все работает с теми же настройками CSS...
*

shesare

  • Осваиваюсь на форуме
  • 33
  • 0 / 0
Re: выпадающее меню скрывается
« Ответ #3 : 30.06.2009, 19:39:30 »
та же проблема(

кто нибудь нашел решение?
*

marbert

  • Захожу иногда
  • 413
  • 9 / 0
Re: выпадающее меню скрывается
« Ответ #4 : 30.06.2009, 23:55:27 »
та же проблема(

кто нибудь нашел решение?
попробуйте покрутить z-index
*

shesare

  • Осваиваюсь на форуме
  • 33
  • 0 / 0
Re: выпадающее меню скрывается
« Ответ #5 : 01.07.2009, 00:18:49 »
/* Basic wrapper styles
-----------------------------------------------------------------*/
div#wrapper_main{
   width:980px;
   margin:0 auto;
   padding-bottom:20px;
}
div#wrapper_top{
   position:relative;
   min-height:85px;
   margin:0 0 1px 0;
}
div#wrapper_banner{
   margin: 0;
   padding:0;
}
div#slider_wrap{
   border-top:1px solid #e8e8e8!important;
}
div#wrapper_menu{
   float:left;
   width:860px;
   height:46px;
   margin-right:0px;
   display:block;
   position:absolute;
   z-index: 100000;
   top:-48px;
   right:0;
}
div#wrapper_header{
   position:relative;
}
div#wrapper_menu ul{
   width:auto;
   float:right;
   font-size:12px;
}
div#wrapper_menu ul li.level1 a{
   border-left:1px solid #d4d4d4;
   border-right:1px solid #fff;
   color:#979797;
}
div#wrapper_menu .moomenu ul li.topli:first-child a{
   border-left:none;
   color: #3a3a3a!important;
}
div#wrapper_menu ul li:first-child a{
   border-left:none;
}
div#wrapper_menu .moomenu ul li.topli:hover{
   border:1px solid #d4d4d4;
   border-bottom:none;
   background:#fff;
   height:35px;
   line-height:22px;
   position:relative;
   right:-1px;
}
div#wrapper_menu .moomenu ul li.topli:hover a{
   border:none;
   padding:0 0px 0 0px;
   color:#3a3a3a!important;
}
div#wrapper_menu .moomenu ul li.topli:hover ul a{
   color:#3a3a3a!important;
}
div#wrapper_menu li.topli ul{
   top:33px!important;
   background:#fff;
   border:1px solid #d4d4d4;
   border-top:none;
}
div#wrapper_menu li.level1:hover ul{
   left:-1px;
}
div#wrapper_menu li.level1:hover ul ul,
div#wrapper_menu li.level1:hover ul ul ul,
div#wrapper_menu li.level1:hover ul ul ul ul{
   left:190px;
}
div#wrapper_menu li.level1 ul li:hover{
   background:#f9f9f9;
}
div#wrapper_menu li.level1 ul ul,
div#wrapper_menu li.level1 ul ul ul,
div#wrapper_menu li.level1 ul ul ul ul{
   top:-1px!important;
   border-top:1px solid #d4d4d4;
}
div#wrapper_top_content{
   float:right;
   width:780px;
   margin-bottom:26px;
}
div#wrapper_content{
   background:#fff;
   margin-bottom:10px;
   padding:10px 0px 0 10px;
}




так?
*

shesare

  • Осваиваюсь на форуме
  • 33
  • 0 / 0
Re: выпадающее меню скрывается
« Ответ #6 : 01.07.2009, 00:20:35 »
я подозреваю что проблема только в ie
почему то...
*

marbert

  • Захожу иногда
  • 413
  • 9 / 0
Re: выпадающее меню скрывается
« Ответ #7 : 01.07.2009, 00:52:55 »
так?
Вы попробуйте, если что, проблем не будет, надо пробовать со значением z-index - найти оптимальное...
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Пункт меню

Автор s120367

Ответов: 0
Просмотров: 158
Последний ответ 03.06.2018, 13:02:55
от s120367
Большое меню Joomla

Автор Amakeeva

Ответов: 1
Просмотров: 352
Последний ответ 22.01.2018, 13:17:45
от effrit
Как можно отображать имя пользователя в название меню?

Автор selimoff

Ответов: 27
Просмотров: 3414
Последний ответ 02.01.2018, 15:24:44
от logan-19
как сделать пункт меню не кликабельным?

Автор qweqweqwe

Ответов: 13
Просмотров: 6264
Последний ответ 07.09.2017, 01:45:49
от forzi
Сдвинуть пункты меню в левое положение

Автор wectra

Ответов: 6
Просмотров: 617
Последний ответ 12.07.2017, 21:09:01
от wectra