Frage Menü wird nicht geöffnet

Croghs · 28 Dezember 2015

Hallo,
ich habe zurzeit ein Problem, bei dem ich nicht weiterkomme. Auf der Website soll ein Menü geöffnet werden, wenn man den Punkt Services hovert, und auch offen bleiben, wenn man im Menü ist (irgendwie logisch). Aber genau das kriege ich nicht hin...
Wäre echt toll wenn mir einer von euch helfen könnte ;)
Danke und MfG
Croghs

HTML:

<body>
    <div class="header">
        <div class="container row">
            <div class="logo">
                <a href="start.html" title="Start">
                    <img id="headlogo" src="STU-LOGO2.png">
                </a>
            </div>
            <ul class="services-list">
                <li class="services list-item">
                    <ul class="navlist">
                        <li class="content-services openmenu">Services <i class="fa fa-angle-down"></i></li>
                        <li class="content-services">Profil</li>
                        <li class="content-services">Einstellungen</li>
                        <li class="content-services">Logout</li>
                    </ul>
                    <div class="sub-list-holder">
                        <ul class="sub-list">
                            <li class="sub-list-item subgroups cell">
                                <a href="groups.html" title="Kurse">
                                    <div class=cellbar>
                                        <i class="fa fa-th fa-3x"></i>
                                        <p class="incelltext groupstext">Kurse</p>
                                    </div>
                                </a>
                            </li>
                            <li class="sub-list-item subchats cell">
                                <a href="messages.html" title="Nachrichten">
                                    <div class=cellbar>
                                        <i class="fa fa-comments fa-3x"></i>
                                        <p class="incelltext groupstext">Nachrichten</p>
                                    </div>
                                </a>
                            </li>
                            <li class="sub-list-item subplans cell">
                                <a href="plans.html" title="Vertretungspläne">
                                    <div class=cellbar>
                                        <i class="fa fa-columns fa-3x"></i>
                                        <p class="incelltext groupstext">Vertretungs- pläne</p>
                                    </div>
                                </a>
                            </li>
                            <li class="sub-list-item subdatas cell">
                                <a href="datas.html" title="Dateiablage">
                                    <div class=cellbar>
                                        <i class="fa fa-database fa-3x"></i>
                                        <p class="incelltext groupstext">Dateiablage</p>
                                    </div>
                                </a>
                            </li>
                            <li class="sub-list-item subtasks cell">
                                <a href="tasks.html" title="Aufgaben">
                                    <div class=cellbar>
                                        <i class="fa fa-tasks fa-3x"></i>
                                        <p class="incelltext groupstext">Aufgaben</p>
                                    </div>
                                </a>
                            </li>
                            <li class="sub-list-item subcalendar cell">
                                <a href="calendar.html" title="Kalender">
                                    <div class=cellbar>
                                        <i class="fa fa-calendar fa-3x"></i>
                                        <p class="incelltext groupstext">Kalender</p>
                                    </div>
                                </a>
                            </li>
                            <li class="sub-list-item subnotesbook cell">
                                <a href="notesbook.html" title="Notenbuch">
                                    <div class=cellbar>
                                        <i class="fa fa-book fa-3x"></i>
                                        <p class="incelltext groupstext">Notenbuch</p>
                                    </div>
                                </a>
                            </li>
                            <li class="sub-list-item submore cell">
                                <a href="more.html" title="Weitere Features">
                                    <div class=cellbar>
                                        <i class="fa fa-plus fa-3x"></i>
                                        <p class="incelltext groupstext">Weitere Features</p>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</body>

Code:

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);
@import url(https://fonts.googleapis.com/css?family=Comfortaa:400,700,300);
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,300);
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,600,700);
@import url(https://fonts.googleapis.com/css?family=Asap:400,700);

/*
*****************************
* 1. COMMON                 *
*****************************
*/

body {
    font:14px Open Sans, serif;
    border-top: 3px solid #fff !important;
    text-align: justify;
    line-height: 22px;
}

* {
  margin: 0px;
  padding: 0px;
}

.row {
    width: 1140px !important;
    margin-left: auto;
    margin-right: auto;
}

a {
    text-decoration: none;
}
/*
*****************************
* 2. HEADER                 *
*****************************
*/
.header {
    position: fixed;
    top: 0px;
    width: 100%;
    background-color: #FFF;
    height: 86px;
    border-bottom: 2px solid #EDEDED;
    z-index: 2;
}

#headlogo {
    height: auto;
    width: 220px;
    margin-top: 25px;
    float: left;
}

.sub-list-holder {
    height: 0px;
    position: absolute;
    margin-top: -15px;
    left: 0px;
    width: 100%;
    background-color: #FFF;
}

.sub-list {
    width: 1140px;
    padding: 15px 0px;
    margin: 0px auto;
    max-height: 0px;
    table-layout:fixed;
    display: table;
}
/*.sub-list, .sub-list-holder {
    overflow: hidden;
    box-sizing: border-box;
}*/

.sub-list-item {
    box-sizing: border-box;
    position: relative;
    float: left;
    width: 12.5%;
    padding-bottom: 12.5%;
    height: 142.5px;
}

.services-list {
    float: right;
    padding-left: 15px;
    display: table;
    table-layout: fixed;
}

.list-item {
    padding: 0px 15px;
    box-sizing: border-box;
    float: left;
    line-height: 86px;
    font-weight: 400;
    color: #2C3239;
    font-size: 18px;
    cursor: default;
    list-style: none;
}
.content-services {
    line-height: 86px;
    display: inline;
    list-style-type: none;
    padding-right: 25px;
    font-size: 20px;
    font-family: Source Sans Pro, sans-serif;
}


.serviceslist{
    float: left;
}

li {
    list-style: outside none none;
}

.sub-list {
    display: none;
    transition-duration: 0.2s;
}

.sub-list-holder {
    display: none;
    transition-duration: 0.2s;
}


.openmenu:hover .sub-list{
    display: inline;
    transition-duration: 0.4s;
}

.openmenu:hover .sub-list-holder{
    display: inline;
    height: auto;
    margin-top: -2px;
    padding-top: 2px;
    padding-bottom: 10px;
    box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.1);
    transition-duration: 0.4s;
}

.linktable {
    margin-top: 150px;
    width: 1140px;
    border: none;
    border-collapse: collapse;
    table-layout:fixed;
    display: table;
}


.cell {
    text-align: center;   
/*border: 1px solid #fff; */   
    border-bottom: none;   
    display: table-cell;   
    -webkit-box-shadow: 0 0 0 1px #FFFFFF;   
    box-shadow: 0 0 0 1px #FFFFFF;
    float: left;
}

.cell {
    background-color: #3A3A3C;
    transition: 0.5s background-color;
    transition-duration: 0.5s;
}

.cell:hover {
    background-color: #0F75BC;
    transition-duration: 0.5s;
}


.cell a {
    width: 100%;
    display:block;
    color: white;
    text-decoration: none;
}


.cell i {
    vertical-align: middle;
    margin-top: 45px;
    transition-duration: 0.5s;
}

.incelltext {
    margin-top: 10px;
    font-size: 20px;
    font-weight: bold;
    opacity: 0;
    transition-duration: 0.5s;
    line-height: 30px;
}

.cell:hover .incelltext  {
    opacity: 1;
    transition-duration: 0.5s;
}

.cell:hover i  {
    margin-top: 20px;
    transition-duration: 0.5s;
}

.ul {
    width: 1140px;
}
.li {
    list-style: outside none none;
}

.cellbar {
    height: 142.5px;
}

SpiceLab · 28 Dezember 2015

https://jsfiddle.net/spicelab/b03f5Lrx/

Die Liste (= Submenü) innerhalb der Klasse .sub-list-holder wurde in das entsprechende <li>Services</li> verschoben.

Ergänzungen im CSS:

CSS:

.sub-list {
  ...
  position:absolute;
  top:50px;
  left:-700px
}
.services-list {
  ...
  position:relative
}
.list-item {
  ...
  cursor: pointer; /* anstatt default */
  ...
}

Frage Menü wird nicht geöffnet

Croghs

Neues Mitglied

SpiceLab

Mod | ZENmechanic

Neueste Beiträge